<template>
  <li :key="props.item.id">
    <span><i>{{ props.index + 1 }}</i></span>
    <span>{{ props.item.name }}</span>
    <span>浏览数：{{ props.item.visit_num }}</span>
  </li>
</template>
<script setup lang="ts">
const props = defineProps(["item", "index"])
</script>

<style scoped lang="less">
li {
  list-style: none;
  display: flex;
  margin-bottom: 10px;
  align-items: center;

  > span {
    flex: 1;
    max-width: 33%;

    &:nth-of-type(2) {

    }

    > i {
      display: inline-block;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      border-radius: 50%;
      font-style: normal;
      background: #1890ff;
    }
  }
}
</style>